<template>
  <div class="list">
    <div class="list-content">
      <flexbox class="header">
        <div v-photo="data.create_user_info" v-lazy:background-image="
            $options.filters.filterUserLazyImg(data.create_user_info.thumb_img)
          " :key="data.create_user_info.thumb_img" class="div-photo head-img"></div>
        <div class="name-time">
          <span class="name">{{ data.create_user_info.realname }}</span>
          <span class="time">{{ data.create_time | filterTimestampToFormatTime }}</span>
        </div>
        <div class="rt-setting">
          <span class="bg-color" :style="{ 'background-color': getStatusColor(data.check_status) }"></span>
          <span class="dep">
            <span>{{ data.category_name }} - </span>
            <span>{{ getStatusName(data.check_status) }}</span>
          </span>
          <!-- 编辑 -->
          <el-dropdown v-if="
              canEdit &&
              data.permission &&
              (data.permission.is_recheck ||
                data.permission.is_update ||
                data.permission.is_delete)
            " @command="handleCommand" trigger="click">
            <i style="color: #cdcdcd; cursor: pointer" class="el-icon-arrow-down el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="data.permission && data.permission.is_recheck" command="withdraw">
                撤回
              </el-dropdown-item>
              <el-dropdown-item v-if="data.permission && data.permission.is_update" command="edit">
                编辑
              </el-dropdown-item>
              <el-dropdown-item v-if="data.permission && data.permission.is_delete" command="delete">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </flexbox>
      <div class="row" @click="checkDetail(data)">
        <p v-if="data.content" class="text">{{ data.content }}</p>
        <p v-if="data.causeTitle" class="title">{{ data.causeTitle }}</p>
      </div>
      <!-- v-if="data.check_status == 0" -->
      <flexbox justify="flex-end">
        <el-button type="primary" size="mini" @click="handlePrint">打印</el-button>
      </flexbox>
      <div class="accessory" v-if="data.fileList.length > 0 || data.imgList.length > 0">
        <!-- 图片 -->
        <div class="upload-img-box">
          <div v-for="(imgItem, k) in data.imgList" :key="k" class="img-list" @click="imgZoom(data.imgList, k)">
            <img v-lazy="imgItem.file_path_thumb" />
          </div>
        </div>
        <!-- 附件 -->
        <div class="accessory-box">
          <file-cell v-for="(file, fileIndex) in data.fileList" :key="fileIndex" :data="file" :cellIndex="fileIndex">
          </file-cell>
        </div>
      </div>
      <!-- 关联业务 -->
      <div class="related-business" v-if="
          relatedListData.contacts.length > 0 ||
          relatedListData.customer.length > 0 ||
          relatedListData.business.length > 0 ||
          relatedListData.contract.length > 0
        ">
        <div class="label">关联业务</div>
        <div v-for="(items, key) in relatedListData" :key="key">
          <related-business-cell v-for="(item, itemIndex) in items" :data="item" :cellIndex="itemIndex" :type="key"
            :key="itemIndex" :showFoot="false" @click.native="checkRelatedDetail(key, item)">
          </related-business-cell>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import RelatedBusinessCell from "@/views/OAManagement/components/relatedBusinessCell";
  import FileCell from "@/views/OAManagement/components/fileCell";

  export default {
    name: "examine-cell", // 审批cell
    components: {
      RelatedBusinessCell,
      FileCell,
    },
    mixins: [],
    computed: {
      relatedListData() {
        return {
          contacts: this.data.contactsList || [],
          customer: this.data.customerList || [],
          business: this.data.businessList || [],
          contract: this.data.contractList || [],
        };
      },
    },
    watch: {},
    data() {
      return {};
    },
    props: {
      data: Object,
      // 是否可编辑
      canEdit: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      // 获取状态名称
      getStatusName(status) {
        if (status == 0) {
          return "待审";
        } else if (status == 1) {
          return "审批中";
        } else if (status == 2) {
          return "通过";
        } else if (status == 3) {
          return "拒绝";
        } else if (status == 4) {
          return "撤回";
        }
        return "";
      },
      getStatusColor(status) {
        if (status == 0) {
          return "#F3A633";
        } else if (status == 1) {
          return "#F3A633";
        } else if (status == 2) {
          return "#93E06D";
        } else if (status == 3) {
          return "#FF0000";
        } else if (status == 4) {
          return "#FF0000";
        }
        return "";
      },
      // 放大图片
      imgZoom(images, k) {
        this.$bus.emit("preview-image-bus", {
          index: k,
          data: images.map((item) => {
            return {
              url: item.file_path,
              name: item.name,
            };
          }),
        });
      },
      // 编辑 删除 撤回
      handleCommand(command) {
        if (this.canEdit) {
          this.$emit("on-handle", {
            type: command,
            data: {
              item: this.data
            }
          });
        }
      },
      // 打印
      handlePrint() {
        this.$emit("on-handle", {
          type: 'print',
          data: {
            item: this.data
          }
        });
      },
      // 查看详情
      checkDetail(data) {
        // if (this.canEdit) {
        this.$emit("on-handle", {
          type: "view",
          data: {
            item: this.data
          }
        });
        // }
      },
      // 关联详情
      checkRelatedDetail(type, data) {
        //   if (this.canEdit) {
        this.$emit("on-handle", {
          type: "related-detail",
          data: {
            type: type,
            item: data
          },
        });
        //   }
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "../../styles/content.scss";

  .list {
    margin-bottom: 20px;
    vertical-align: middle;

    .list-content {
      padding: 0 10px 10px 0;

      .header {
        margin-bottom: 15px;
        @include color9;
        font-size: 12px;

        .head-img {
          width: 35px;
          height: 35px;
          border-radius: 17.5px;
        }

        .name-time {
          display: inline-block;
          margin-left: 13px;
          flex: 1;

          .name {
            font-size: 15px;
            color: #333333;
            display: block;
            margin-bottom: 5px;
          }
        }

        .rt-setting {
          float: right;
          line-height: 30px;

          .dep {
            color: #333333;
            margin-right: 20px;
          }

          img {
            width: 16px;
            @include cursor;
            @include v-align;
          }

          .bg-color {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
      }

      .row {
        white-space: pre-wrap;
        word-wrap: break-word;
        letter-spacing: 0.5px;
        line-height: 18px;
        cursor: pointer;
        color: #3e84e9;

        .text {
          padding-bottom: 10px;
        }

        .title {
          @include color9;
          font-size: 13px;
          padding-bottom: 10px;
        }
      }

      .accessory {
        .upload-img-box {
          margin: 10px 0;

          .img-list {
            display: inline-block;
            position: relative;
            margin-right: 10px;
            width: 80px;
            height: 60px;
            line-height: 60px;
            cursor: pointer;

            img {
              width: 80px;
              height: 60px;
            }

            .img-hover {
              position: absolute;
              top: 0;
              right: 0;
              left: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              text-align: center;
              font-size: 12px;
              color: #fff;
              display: none;

              span {
                @include cursor;
                display: inline-block;
              }
            }
          }

          .img-list:hover {
            .img-hover {
              display: inline-block;
            }
          }
        }
      }

      .related-business {
        margin: 15px 0;

        .label {
          font-size: 13px;
          margin-bottom: 7px;
          color: #666;
        }
      }
    }
  }

  .list:not(:last-child) {
    .list-content {
      border-bottom: 1px solid #e6e6e6;
    }
  }

</style>
